<template>
    <div id="charge">
        <p class="action_title">意图研判 <img src="../../../image/charge/charge_add.png" @click="addCharge()" alt="" style="position: relative;top:4px;cursor: pointer"></p>
        <ul class="charge_item">
            <li v-for="(item, i) in chargeData">
                <p>
                    <span class="charge_show" @click="item.open = !item.open"></span>
                    <span class="charge_name">{{item.name}}</span>
                    <span class="btns">
                        <span></span>
                        <span></span>
                    </span>
                </p>
                <div v-show="item.open">
                    <table>
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>实体</th>
                            <th>时间</th>
                            <th>状态变化</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="val in chargeData[i].detailMessage">
                            <td>{{val.num}}</td>
                            <td>{{val.item}}</td>
                            <td>{{val.time}}</td>
                            <td>{{val.status}}</td>
                            <td><span class="charge_remove"></span></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "intention-charge",
        components: {},
        data() {
            return {
                chargeData: [
                    {name: '意图研判', open: true, detailMessage: [
                            {num: 1, item: '乌鲁木齐机场', time: '2018.06.13', status: '乌鲁木齐机场空中演习加油'}
                        ]},
                    {name: '意图研判', open: true, detailMessage: [
                            {num: 1, item: '乌鲁木齐机场', time: '2018.06.13', status: '乌鲁木齐机场空中演习加油'}
                        ]}
                ]
            }
        },
        mounted() {

        },
        methods: {
            addCharge() {
                this.chargeData.push({name: '', open: true, detailMessage: []})
            }
        }
    }
</script>

<style lang="less" type="text/less" scoped>
    @import "intentionCharge";
</style>